{% extends 'base.html' %}
{% from 'bootstrap5/pagination.html' import render_pagination %}
{% from 'macros.html' import photo_card, user_card with context %}

{% block title %}Search: {{ q }}{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Search: {{ q }}</h1>
</div>
<div class="row">
  <div class="col-md-3">
    <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
      <a class="nav-item nav-link {% if category == 'photo' %}active{% endif %}"
        href="{{ url_for('.search', q=q, category='photo') }}">Photo</a>
      <a class="nav-item nav-link {% if category == 'user' %}active{% endif %}"
        href="{{ url_for('.search', q=q, category='user') }}">User</a>
      <a class="nav-item nav-link {% if category == 'tag' %}active{% endif %}"
        href="{{ url_for('.search', q=q, category='tag') }}">Tag</a>
    </div>
  </div>
  <div class="col-md-9">
    {% if results %}
      <h5>{{ results|length }} results</h5>
      {% for item in results %}
      {% if category == 'photo' %}
        {{ photo_card(item) }}
      {% elif category == 'user' %}
        {{ user_card(item) }}
      {% else %}
      <a class="badge text-bg-light rounded-pill" href="{{ url_for('.show_tag', tag_id=item.id) }}">
        {{ item.name }} {{ item.photos|length }}
      </a>
      {% endif %}
      {% endfor %}
    {% else %}
    <h5 class="tip">No results.</h5>
    {% endif %}
  </div>
</div>
{% if results %}
<div class="page-footer">
  {{ render_pagination(pagination, align='right') }}
</div>
{% endif %}
{% endblock %}
